<template>
    <div>
        <searchbar @showClick="isshowClick" @reqs="isrequest"></searchbar>
        <div id="searchMenu" v-if="istrue">

            <div v-for="g in goodsmenu" :key="g._id">
                <p @touchstart="searchClick(g)">{{g.goodsname}}</p>
            </div>
        </div>
        <div>
            <div id="select-menu">
                <div class="item" :class="{'light':isshow,'item':!isshow}" @touchstart="show">默认</div>
                <div class="item" :class="{'light':isshow1,'item':!isshow1}" @touchstart="show1">
                    <span @touchstart="pricesort">价格</span>
                    <span class="fa fa-angle-down" v-show="!up"></span>
                    <span class="fa fa-angle-up" v-show="up"></span>
                </div>
                <div class="item" :class="{'light':isshow2,'item':!isshow2}" @touchstart="show2">
                    <span @touchstart="count">销量</span>
                    <span class="fa fa-angle-down" v-show="!up1"></span>
                    <span class="fa fa-angle-up" v-show="up1"></span>
                </div>
                <div class="item" :class="{'light':isshow3,'item':!isshow3}" @touchstart="show3">筛选</div>
            </div>
        </div>
        <div v-if="goodsmenu.length==0&&isRequest">
            <div id="sorry-box">
                <div id="sorry-span">
                    <span>抱歉,没有您要的商品!</span>
                </div>
            </div>
        </div>
        <div v-else>
            <div id="goods-box">
                <router-link class="msg" v-for="p in goods" :key="p.goodsname" :to="'/goods/goodsdetails/'+p._id">
                    <div class="pic"><img :src="p.pic[0]" alt=""></div>
                    <div class="text">
                        <p class="co">{{p.goodsname}}</p>
                        <p class="red">{{p.goodsprice|currency("￥",2)}}</p>
                    </div>
                </router-link>
            </div>
        </div>

        <footers></footers>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import searchbar from "../components/searchbar"
import footers from "../components/footers"
export default {
    data: function() {
        return {
            isshow: true,
            isshow1: false,
            isshow2: false,
            isshow3: false,
            goods: [],
            a: "-1",
            up: false,
            up1: false,
            istrue: false,
            isRequest: false
        }
    },
    computed: {
        ...mapState([
            "goodsmenu"
        ])
    },
    filters: {
        currency: function(money, prefix = "$", num = 2) {
            var r = money.toFixed(num);
            r = prefix + r;
            return r;
        }
    },
    components: {
        searchbar,
        footers
    },
    mounted() {
        // console.log(this.$route.params.msg);
        
            var params = {
                a: this.$route.params.msg
            }
            this.http.post("/api/goodslist", params)
                .then(res => {
                    this.goods = res.data.msg;
                })

    },
    methods: {
        isshowClick: function(e) {
            if (e == "istrue") {
                this.istrue = true;
            }
        },
        isrequest: function(e) {
            if (e == "isRequest") {
                this.isRequest = true;
            }
        },
        show: function() {
            this.isshow = true;
            this.isshow1 = false;
            this.isshow2 = false;
            this.isshow3 = false;
            var params = {
                a: this.$route.params.msg
            }
            this.http.post("/api/goodslist", params)
                .then(res => {
                    this.goods = res.data.msg;
                })
        },
        show1: function() {
            this.isshow1 = true;
            this.isshow = false;
            this.isshow2 = false;
            this.isshow3 = false;
            // this.http.post("/api/priceselect",params)
        },
        show2: function() {
            this.isshow2 = true;
            this.isshow1 = false;
            this.isshow = false;
            this.isshow3 = false;
        },
        show3: function() {
            this.isshow3 = true;
            this.isshow = false;
            this.isshow1 = false;
            this.isshow2 = false;
        },
        pricesort: function() {
            // console.log(e.target.textContent)
            this.a = -this.a;
            this.up = !this.up;
            var params = {
                a: this.a,
                b: this.$route.params.msg
            }
            // console.log(params.b)
            this.http.post("/api/goods/sort", params)
                .then(res => {
                    this.goods = res.data.msg
                })
        },
        count: function() {
            this.a = -this.a;
            this.up1 = !this.up1;
            var params = {
                a: this.a,
                b: this.$route.params.msg
            }
            this.http.post("/api/goods/number", params)
                .then(res => {
                    this.goods = res.data.msg
                })
        },
        searchClick: function(g) {
            this.istrue = false;
            var params = {
                a: g._id
            }
            this.http.post("/api/goodsdetails", params)
                .then(res => {
                    this.goods = [res.data.msg];
                })
        }
    }
}
</script>

<style scoped>
#sorry-box {
    width: 100vw;
}

#sorry-span {
    width: 43vw;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

a {
    text-decoration: none;
}

#select-menu {
    margin-top: 40px;
    height: 40px;
    line-height: 40px;
    width: 100vw;
    border-bottom: solid 1px #dcdcdc;
    display: flex;
    font-size: 14px;
}

.item {
    width: 25vw;
    height: 40px;
    text-align: center;
}

.light {
    color: #EBA126;
    border-bottom: solid 3px #eba126;
}

#goods-box {
    /*height: 130px;*/
    width: 100vw;
    /*border-bottom: 1px solid #dcdcdc;*/
}

.msg {
    width: 90vw;
    margin: 0 auto;
    margin-top: 5px;
    height: 120px;
    border-bottom: solid 1px #dcdcdc;
    display: flex;
}

.pic {
    width: 100px;
    height: 100px;
    /*border: solid 1px black;*/
    margin-top: 10px;
}

.pic img {
    height: 100px;
}

.text {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    /*border: solid 1px black;*/
}

.red {
    color: red;
}

.co {
    color: #252525;
    font-size: 16px;
}

#searchMenu {
    height: 50px;
    overflow-y: scroll;
    margin-top: 44px;
    width: 70vw;
    border: solid 1px #f2f2f2;
    position: absolute;
    top: -9px;
    left: 24vw;
    background-color: white;
    font-size: 14px;
    color: #666;
}

#searchMenu p {
    margin: 0;
}
</style>